<template>
  <div class="table-wrapper">
    <div v-for="row in tableGridSize.row" :key="row" class="row">
      <div
        v-for="col in tableGridSize.col"
        :key="col"
        class="col"
        :class="{
          'table-col-selected': col <= selectedTableGridSize.col && row <= selectedTableGridSize.row
        }"
        @mouseover="selectTableGridSize(row, col)"
        @mousedown="confirmCreateTable(row, col)"
      ></div>
    </div>
    <div class="table-wrapper-footer">
      <span>{{ selectedTableGridSize.row }}</span>
      <span>X</span>
      <span>{{ selectedTableGridSize.col }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emits = defineEmits(['createTable'])
const tableGridSize = ref({
  row: 5,
  col: 5
})
const selectedTableGridSize = ref({ row: 2, col: 2 })
const selectTableGridSize = (row: number, col: number): void => {
  if (row === tableGridSize.value.row) {
    tableGridSize.value.row = Math.min(row + 1, 10)
  }

  if (col === tableGridSize.value.col) {
    tableGridSize.value.col = Math.min(col + 1, 10)
  }

  selectedTableGridSize.value.row = row
  selectedTableGridSize.value.col = col
}
const confirmCreateTable = (row: number, col: number) => {
  emits('createTable', { row, col })
}
</script>

<style scoped lang="scss">
.table-wrapper {
  .row {
    display: flex;
    gap: 10px;
    margin: 10px;
    .col {
      width: 15px;
      height: 15px;
      border: 1px solid #ccc;
      border-radius: 2px;
    }
    .table-col-selected {
      background-color: #ecf5ff;
      border: 1px solid #409eff;
    }
  }
  .table-wrapper-footer {
    text-align: center;
  }
}
</style>
